<template>
    
  <div class="self_adaption">
    
    <p style="line-height: 50px;font-size: 16px;font-weight: bold;">内容上传编辑</p>
    <div class="main df">

        <div class="left">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <div class="df">
                    <div class="left_l p10">
                        <el-input placeholder="搜索" size="small">
                            <template #prefix>
                                <el-icon>
                                    <search />
                                </el-icon>
                            </template>
                        </el-input>
                        <!-- //////////////////////  树状结构 ////////////////////////////////// -->
                        <el-tree class="mt10" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
                    </div>
                    <div class="left_r">
                        <!-- //////////////////////  首页 ////////////////////////////////// -->
                        <el-tab-pane label="首页" name="first">
                            <div class="demo-collapse">
                                <el-collapse v-model="activeNames" @change="handleChange">
                                    <el-collapse-item title="店铺名片展示" name="1">
                                        <el-form :model="form" label-width="90px">
                                            <el-form-item label="店铺名称：">
                                                <el-input v-model="form.name" disabled style="width: 45%;" />
                                            </el-form-item>
                                            <el-form-item label="店铺简介：">
                                                <el-input v-model="form.desc" type="textarea" disabled style="width: 70%" />
                                            </el-form-item>
                                            <el-form-item label="店铺头像：">
                                                <el-avatar shape="square" :src="form.url" :size="120" />
                                            </el-form-item>
                                        </el-form>
                                    </el-collapse-item>
                                    <el-collapse-item title="分类展示" name="2">
                                        <el-table :data="tableData" border style="width: 100%">
                                            <el-table-column prop="date" label="一级分类" />
                                            <el-table-column prop="name" label="二级分类" />
                                        </el-table>
                                    </el-collapse-item>
                                    <el-collapse-item title="商品列表展示" name="3">
                                        <el-table :data="tableList" :border="parentBorder" style="width: 100%">
                                            <el-table-column type="expand">
                                                <template #default="props">
                                                    <div m="4">
                                                        <p m="t-0 b-2">State: {{ props.row.state }}</p>
                                                        <p m="t-0 b-2">City: {{ props.row.city }}</p>
                                                        <p m="t-0 b-2">Address: {{ props.row.address }}</p>
                                                        <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="图片" prop="name">
                                                <template #default="">
                                                    <el-avatar shape="square" :src="form.url" :size="80" />
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="Name" prop="name" />
                                            <el-table-column label="Name" prop="zip" />
                                        </el-table>
                                    </el-collapse-item>
                                </el-collapse>
                            </div>
                        </el-tab-pane>
                        <!-- //////////////////////  详情页 ////////////////////////////////// -->
                        <el-tab-pane label="详情" name="second">
                            <div class="mb20">
                                <el-button size="small" type="primary">添加素材</el-button>
                                <el-button size="small" plain>...</el-button>
                            </div>
                            <el-collapse v-model="activeNames" @change="handleChange">
                                <el-collapse-item title="商品主图" name="4">
                                    <div>
                                        <el-button size="small" round type="primary">图片</el-button>
                                        <el-button size="small" round>视频</el-button>
                                    </div>
                                    <!-- 内容 -->
                                    <div>
                                        <el-image style="width: 100px; height: 100px" :src="url" :fit="fit" />
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="商品详情" name="5">

                                </el-collapse-item>
                                <el-collapse-item title="规格参数" name="6">

                                </el-collapse-item>
                            </el-collapse>
                        </el-tab-pane>
                    </div>
                </div>
            </el-tabs>
        </div>
        <div class="right">
            <h2 class="tac fwb" style="margin-bottom: 20px;">预览</h2>
            <div class="view">
                <h2 class="tac fwb">首页</h2>
                <div class="view_name df aic">
                    <div class="view_name_img mr20"></div>
                    <div>
                        <p class="f14">店铺名字</p>
                        <span class="f12">简介简洁</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Picture as IconPicture, Search } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
const activeNames = ref(['1'])
const activeName = ref('first')
const activeName1 = ref('first')


/* 选项卡 */
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
/* 表格 */
const tableData = [
    {
        date: '一级分类',
        name: '二级分类',
    },
    {
        date: '一级分类',
        name: '二级分类',
    },
]
const handleChange = (val: any) => {
    console.log(val)
}
/* 树状结构 */
interface Tree {
    label: string
    img?: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const data: Tree[] = [
    {
        label: '一级文件夹',
        children: [
            {
                label: '二级文件夹',
                children: [
                    {
                        label: '三级文件夹',
                    },
                ],
            },
            {
                label: '二级文件夹',
                children: [
                    {
                        label: '三级文件夹',
                    },
                    {
                        label: '三级文件夹',
                    },
                ],
            },
        ],
    },
    {
        label: '一级文件夹',
        children: [
            {
                label: '二级文件夹',
                children: [
                    {
                        label: '三级文件夹',
                    },
                ],
            },
            {
                label: '二级文件夹',
                children: [
                    {
                        label: '三级文件夹',
                    },
                ],
            },
            {
                label: '二级文件夹',
                children: [
                    {
                        label: '三级文件夹',
                    },
                ],
            },
            {
                label: '二级文件夹',
                children: [
                    {
                        label: '三级文件夹',
                        img: 'https://tpc.googlesyndication.com/simgad/2888089839765083813'
                    },
                ],
            },
        ],
    },
]

const defaultProps = {
    children: 'children',
    label: 'label',
}




// do not use same name with ref
const form = ref<any>({
    name: '我是名称',
    desc: '我是简介',
    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
})


/* 分类展示 */
const parentBorder = ref(false)
const tableList = [
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
    },
]

/* 图片 */
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
const url =
    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
</script>

<style scoped  lang="scss">
.main {
    width: 100%;
    background-color: #fff;

    .left {
        width: 72%;

        .left_l {
            width: 24%;
            height: calc(100vh - 204px);
            border-right: 1px solid #ccc;

        }

        .left_r {
            width: 76%;
            padding: 16px;
        }
    }

    .right {
        width: 28%;
        background-color: #fff;
        padding: 30px;
        border-left: 1px solid #ccc;

        .view {
            width: 100%;
            height: 96%;
            background: #F2F7FC;
            border-radius: 40px;
            padding: 30px;

            .view_name {
                width: 100%;
                height: 5.625rem;
                background-color: #cee7ff;
                border-radius: 18px;
                margin-top: 20px;
                padding: 20px;

                .view_name_img {
                    width: 3.2rem;
                    height: 3.2rem;
                    background-color: #fff;
                    border-radius: 50%;
                }
            }
        }
    }
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

/* 选项卡左边间距 */
:deep .el-tabs__nav-scroll {
    margin-left: 20px;
}

/* 商品主图---图片 */
.demo-image .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image .block:last-child {
    border-right: none;
}
// ..el-image__inner{

// }
.demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>